<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/13
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>忘记密码</title>
    <script type="text/javascript" src="${ctx }/static/js/jquery-1.10.1.min.js"></script>
</head>
<body style="background-image: url('${ctx}/static/img/bg/bg_login.jpg')">
<!-- 导航栏 -->
<jsp:include page="../../jsp/common/head.jsp"/>

<!-- 中部主体 -->
<div>
    <br/><br/>
    <h1 style="text-align: center;color: aqua;"> F O R G E T </h1><br/>
    <center>
        <span id="message" style="color: red"></span><br/><br/>

        <span class="label1">用&nbsp;&nbsp;户&nbsp;&nbsp;名 : </span>
        <input type="text" id="username" name="username" placeholder=" 请输入用户名"/>
        <br class="br1"/><br class="br1"/>

        <span class="label2" style="display: none">安全问题 : </span>
        <span id="question1" class="question" style="display: none; width: 120px;"></span>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>
        <input type="text" id="answer1" class="answer" placeholder=" 请输入安全问题1的答案" style="display: none"/>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>
        <span class="label2" style="display: none">安全问题 : </span>
        <span id="question2" class="question" style="display: none; width: 120px;"></span>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>
        <input type="text" id="answer2" class="answer" placeholder=" 请输入安全问题2的答案" style="display: none"/>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>
        <span class="label2" style="display: none">安全问题 : </span>
        <span id="question3" class="question" style="display: none; width: 120px;"></span>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>
        <input type="text" id="answer3" class="answer" placeholder=" 请输入安全问题3的答案" style="display: none"/>
        <br class="br2" style="display: none"/><br class="br2" style="display: none"/>

        <span class="label3" style="display: none">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码 : </span>
        <input type="password" id="password" name="password" placeholder=" 请输入密码" style="display: none;"/>
        <br class="br3" style="display: none"/><br class="br3" style="display: none"/>
        <span class="label3" style="display: none;">确认密码 : </span>
        <input type="password" id="rePassword" name="password" placeholder=" 再次输入密码" style="display: none;"/>
        <br class="br3" style="display: none"/><br class="br3" style="display: none"/>

        <input type="button" id="per" value="上一步" style="display: none"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" id="next" value="下一步"/>
        <br/><br/>
        <a href="javascript:;" id="back_login" onclick="join_login_page()">返回 >></a>
    </center>
</div>

<!-- 底部 -->
<jsp:include page="../../jsp/common/foot.jsp"/>
</body>

<script type="text/javascript">
    $(function () {
        var count = 0;
        var username = "";
        $("#next").click(function () {
            // 用户名校验
            if (count == 0) {
                username = $("#username").val();
                if (username == "") {
                    $("#message").text("用户名不能为空");
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "${ctx}/user/forget_password",
                    contentType: "application/json",
                    data: JSON.stringify({
                        date: new Date(),
                        userName: username
                    }),
                    dataType: "json",
                    success: function (result) {
                        if (result.status == 500) {
                            $("#message").text(result.msg);
                            return false;
                        }
                        if (result.status == 200) {
                            $(".label1").hide();
                            $("#username").hide();
                            $(".br1").hide();
                            $(".label2").show();
                            $(".question").show();
                            $(".answer").show();
                            $(".br2").show();
                            $("#per").show();
                            count = count + 1;
                            $("#question1").text(result.data.questionOne + "?");
                            $("#question2").text(result.data.questionTwo + "?");
                            $("#question3").text(result.data.questionThree + "?");
                        }
                    }
                })
            }
            // 安全问题校验
            if (count == 1) {
                var answer1 = $("#answer1").val();
                var answer2 = $("#answer2").val();
                var answer3 = $("#answer3").val();
                if (answer1 == "" || answer2 == "" || answer3 == "") {
                    $("#message").text("安全问题的回答不能为空");
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "${ctx}/user/check_question",
                    contentType: "application/json",
                    data: JSON.stringify({
                        date: new Date(),
                        userName: username,
                        answerOne: answer1,
                        answerTwo: answer2,
                        answerThree: answer3
                    }),
                    dataType: "json",
                    success: function (result) {
                        if (result.status == 500) {
                            $("#message").text(result.msg);
                            return false;
                        }
                        if (result.status == 200) {
                            $(".label2").hide();
                            $(".question").hide();
                            $(".answer").hide();
                            $(".br2").hide();
                            $(".label3").show();
                            $("#password").show();
                            $("#rePassword").show();
                            $(".br3").show();
                            count = count + 1;
                            $("#next").val("提交");
                        }
                    }
                })
            }
            // 更改密码
            if (count == 2) {
                var password = $("#password").val();
                var rePassword = $("#rePassword").val();
                if (password == "") {
                    $("#message").text("密码不能为空");
                    return false;
                }
                if (rePassword == "") {
                    $("#message").text("再次输入密码不能为空");
                    return false;
                }
                if (password != rePassword) {
                    $("#message").text("两次输入的密码不一致");
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "${ctx}/user/edit_password",
                    contentType: "application/json",
                    data: JSON.stringify({
                        date: new Date(),
                        userName: username,
                        password: password
                    }),
                    dataType: "json",
                    success: function (result) {
                        if (result.status == 500) {
                            $("#message").text(result.msg);
                            return false;
                        }
                        alert("修改密码成功");
                        window.location.href = "${ctx}/login.html"
                    }
                })
            }
        })

        $("#per").click(function () {
            if (count == 1) {
                $(".label1").show();
                $("#username").show();
                $(".br1").show();
                $(".label2").hide();
                $(".question").hide();
                $(".answer").hide();
                $(".br2").hide();
                count = count - 1;
                $("#per").hide();
            }
            if (count == 2) {
                $(".label2").show();
                $(".question").show();
                $(".answer").show();
                $(".br2").show();
                $(".label3").hide();
                $("#password").hide();
                $("#rePassword").hide();
                $(".br3").hide();
                count = count - 1;
                $("#next").val("下一步");
            }
        })

        $("input").change(function () {
            $("#message").text("");
        })
    })
</script>
</html>
